<!DOCTYPE html>
<html>
<head>
  <title>Chess Game View</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/view.css">
  <script src="js/socket.io.min.js"></script>
</head>
<body>
<div id="wrapper">
  <div id="game-zone">
    <ul id="players"></ul>
    <canvas id="canvas" width="800" height="600"></canvas>
    <img id="static-map">
  </div>
</div>
<div id="wait-zone">
  <p id="last-battle-result"></p>
  <p>Waiting for player login...</p>
  <p id="player-list">
    <strong id="playerA">Player A</strong>
    <strong id="playerB">Player B</strong>
  </p>
  <p>You can login by visiting <strong id="client-url"></strong>
    <br> or using <strong>QR code</strong> below to get url:</p>
  <img id="qrCode">
</div>
<div id="main-info"></div>
<div id="overlay"></div>
<div id="tip" class="tip"></div>
<div id="dice-wrapper">
  <div id="dice" class="backfaces">
    <div class="plane one"></div>
    <div class="plane two"></div>
    <div class="plane three"></div>
    <div class="plane four"></div>
    <div class="plane five"></div>
    <div class="plane six"></div>
  </div>
</div>

<audio id="bg-audio" src="audios/waiting.mp3"></audio>
<audio id="surprise-audio"  src="audios/back-to-start.mp3"></audio>

<script src="js/Util.js"></script>
<script src="js/view/Resource.js"></script>
<script src="js/view/Config.js"></script>
<script src="js/game/Animation.js"></script>
<script src="js/game/Sprite.js"></script>
<script src="js/game/Game.js"></script>
<script src="js/Message.js"></script>
<script src="js/view/Socket.js"></script>
<script src="js/Dice.js"></script>
<script src="js/view/UI.js"></script>
<script src="js/GameAudio.js"></script>
<script src="js/view/view.js"></script>
</body>
</html>